<style lang="scss" scoped>
.accountinfo{
    height: 100%;
    background-color: #F0F0F2;
    .info-basic{
        padding-top:0.44rem;
        .item{
            height: 0.51rem;
            line-height: 0.51rem;
            background-color: #ffffff;
            color: #98A5AB;    
            font-size: 0.16rem;       
            .item-left{
                margin-left: 0.12rem;
            }
            .item-right{
                float:right;
                margin-right: 0.14rem;
            }
        }
    }
    .info-link{
        margin-top: 0.12rem;
        background-color: #ffffff;

        .link{
            height: 0.51rem;
            line-height: 0.51rem;
            color:#98A5AB;
            font-size: 0.16rem;
            border-bottom: 1px solid #F0F0F2;
            span{
                margin-left:0.41rem;
            }
        }
    }
}
</style>

<template>
    <div class="accountinfo">
        <div class="topbar">
            <span class="leftbtn" @click="goback"><Icon type="ios-arrow-back"></Icon></span>
            <span class="centertitle">账户信息</span>
        </div>          
        <div class="info-basic">
            <div class="item">
                <span class="item-left">用户名</span>
                <span class="item-right">{{user.username}}</span>
            </div>
            <div class="item">
                <span class="item-left">帐号</span>
                <span class="item-right">{{user.mobile}}</span>
            </div>
        </div>
        <div class="info-link">
            <el-collapse >
                <el-collapse-item title="我的关联账户">
                    <div class="link"><span>快乐的一只小青蛙</span></div>
                    <div class="link"><span>被王子附体啦</span></div>
                </el-collapse-item>
            </el-collapse>
        </div>
    </div>

</template>

<script>
import topBar from '@/views/component/topbar.vue';
import {sampleData} from 'api/index.js'
export default {
    name:'accountInfo',
    data(){
        return{
            user:{
                username:'',
                mobile:''
            }            
        }
    },
    methods:{
        goback(){
            this.$router.go(-1);
        },
        getAccountInfo(){
            sampleData.getAccountInfo().then(res=>{
                if(res.code==0||res.code==200){
                    this.user=res.user;
                }
                else{
                    this.$Message.error(res.msg);
                }
            }).catch(error=>{
                this.$Message.error(error);
            })
        }
    },
    components:{
        topBar
    },
    mounted() {
        this.getAccountInfo();
    }
}
</script>
